"use client"
import { useState } from 'react';
import { Modal } from 'antd';
import { useRouter } from 'next/navigation';
import './modal.css'
export default function productModal(props: any) {
  const router = useRouter()
  const { productInfo, isModalOpen, setIsModalOpen } = props
  console.log(productInfo);

  return (
    <Modal footer={null} open={isModalOpen} onCancel={() => setIsModalOpen(false)} width={800}>
      <div className='modal'>
        <div className='main'>
          <div className="img">
          <img src="/imgs/clients/3-2.jpg" alt="" width='100%'/>
          </div>
          <div className="right">
            <div className='title'>{productInfo.name}</div>
            <div className="line"></div>
            <p>电池类型&emsp;:<span>&nbsp;磷酸铁锂</span></p>
            <p>型&emsp;&emsp;号&emsp;:<span>&nbsp;LN-60</span></p>
            <p>容&emsp;&emsp;量&emsp;:<span>&nbsp;80kWh</span></p>
            <p>循环次数&emsp;:<span>&nbsp;200次</span></p>
            <p>生产日期&emsp;:<span>&nbsp;2023-05-01</span></p>
            <p>质保日期&emsp;:<span>&nbsp;2026-05-01</span></p>
            <p>租金金额&emsp;:<span>&nbsp;800元/月</span></p>
            <button onClick={() => router.push(`/clients/product-display/${productInfo.id}`)}>查看详情&nbsp;&gt;&gt;</button>
          </div>
        </div>
        <div className="footer">

        </div>
      </div>
    </Modal>
  );
}
